<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色表编辑</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/treeSelectStyle.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/treeSelect/metroStyle/metroStyle.css }" th:rel="stylesheet">
    <link th:href="@{/css/fileUpload/imageUpload.css}" th:rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>角色表编辑</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="frm" method="post" action="">
                        <input type="hidden" id="id" name="id">

                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色名称：</label>
                                <div class="col-sm-8">
                                    <input id="roleName" name="roleName" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色编码：</label>
                                <div class="col-sm-8">
                                    <input id="roleCode" name="roleCode" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色简介：</label>
                                <div class="col-sm-8">
                                    <input id="description" name="description" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色状态（1启用 0不启用）：</label>
                                <div class="col-sm-8">
                                    <input id="status" name="status" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">创建时间：</label>
                                <div class="col-sm-8">
                                    <input id="createTime" name="createTime" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">删除标志：</label>
                                <div class="col-sm-8">
                                    <input id="delFlag" name="delFlag" class="form-control" type="text">
                                </div>
                            </div>



                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button class="btn btn-primary" type="reset" onclick="">重置</button>
                                <button class="btn btn-primary" type="submit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- 全局js -->
<script th:src="@{/js/common/jquery.min.js}"></script>
<script th:src="@{/js/common/bootstrap.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/common/content.js}"></script>


<!-- 树形下拉框    -->
<script th:src="@{/js/plugins/treeSelect/treeSelect.2.0.js}"></script>
<script th:src="@{/js/plugins/zTree/jquery.ztree.all.js}"></script>
<!-- jQuery Validation plugin javascript-->
<script th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#frm").validate({
            // debug:true  如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。
            // ignore:".ignore"  对某些元素不进行验证
            //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
            rules: {
                  id:
                          {
                              required: true
                          },
                  roleName:
                          {
                              required: true
                          },
                  roleCode:
                          {
                              required: true
                          },
                  description:
                          {
                              required: true
                          },
                  status:
                          {
                              required: true
                          },
                  createTime:
                          {
                              required: true
                          },
                  delFlag:
                          {
                              required: true
                          },
            },
            //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
            //message当违反对应的规则时，所出现的提示信息
            messages: {
                        id:
                            {
                                required: "请输入"
                            },
                        roleName:
                            {
                                required: "请输入"
                            },
                        roleCode:
                            {
                                required: "请输入"
                            },
                        description:
                            {
                                required: "请输入"
                            },
                        status:
                            {
                                required: "请输入"
                            },
                        createTime:
                            {
                                required: "请输入"
                            },
                        delFlag:
                            {
                                required: "请输入"
                            },
            },
            //使用其它方式代替传统的表单提交方式
            submitHandler: function (form) {
                var object = new Object;
                object.id =  $("#id").val();
                object.roleName =  $("#roleName").val();
                object.roleCode =  $("#roleCode").val();
                object.description =  $("#description").val();
                object.status =  $("#status").val();
                object.createTime =  $("#createTime").val();
                object.delFlag =  $("#delFlag").val();
                //使用ajax提交
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType:'application/json;charset=utf-8',
                    //设置异步
                    async: false,
                    url: "/sysRole/addOrEdit",
                    //$(form).serialize(),输出序列化表单值的结果,该Api可用于AJAX 请求的data
                    data:JSON.stringify(object),
                    success: function (res) {
                        if (res.message == "ok") {
                            layer.msg("编辑成功，2秒后返回...", {time: 2000}, function () {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index);
                            });
                        }
                    }
                });
            }
        });
    });
</script>

<!--修改按钮值回显-->
<script th:inline="javascript">
    var sysRole = [[${sysRole}]];
    if (sysRole != null) {
            $("#id").val(sysRole.id);
            $("#roleName").val(sysRole.roleName);
            $("#roleCode").val(sysRole.roleCode);
            $("#description").val(sysRole.description);
            $("#status").val(sysRole.status);
            $("#createTime").val(sysRole.createTime);
            $("#delFlag").val(sysRole.delFlag);
    }
</script>

</body>

</html>
